<script>
import {axiosGetPersonInfo} from "../api";

export default {
  name: "otherInfo",
  data() {
    return {
      account: this.$route.query.account,
      userName: "我是昵称",
      userSex: "",
      userTag: "",
      userIntroduce: "",
    }
  },
  async beforeMount() {
    let result = await axiosGetPersonInfo({account: this.account});
    if (result.status === 200) {
      this.userName = result.data.userName;
      this.userSex = result.data.gender;
      this.userTag = result.data.label;
      this.userIntroduce = result.data.introduction;
    }
  }
}
</script>

<template>
  <div id="otherInfo" style="height:600px">
    <div class="other-info-box">
      <el-col>
        <div class="grid-content">
          <div class="info">
            <p>个人信息</p>
            <div class="info-box">
              <div class="info-user-img">
                <p>头像</p>
                <img alt="" src="../img/headImg.jpg" width="100">
              </div>
              <el-descriptions :column="4" border class="info-user-information" direction="vertical" title="">
              <el-descriptions-item label="uuid"></el-descriptions-item>
              <el-descriptions-item label="昵称">
                <el-input v-show="change" v-model="userName" lok/>
                <span v-show="!change">{{ userName }}</span></el-descriptions-item>
              <el-descriptions-item label="性别">
                <el-input v-show="change" v-model="userSex" lok/>
                <span v-show="!change">{{ userSex }}</span></el-descriptions-item>
              <el-descriptions-item :span="2" label="个人标签">
                <el-input v-show="change" v-model="userTag" lok/>
                <span v-show="!change">{{ userTag }}</span></el-descriptions-item>
              <el-descriptions-item label="简介">
                <el-input v-show="change" v-model="userIntroduce" lok/>
                <span v-show="!change">{{ userIntroduce }}</span></el-descriptions-item>
            </el-descriptions>
              <div class="info-change">
                <el-button>保存</el-button>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </div>
  </div>
</template>

<style scoped src="../style/other-info.css">

</style>